<template>
	<div class="member">

		<!-- 版心 -->

		<div class="Library_wrap">

			<!-- 头部 -->

			<div class="header">

				<div class="header_bottom">

					<div class="header_left">

						<div class="header_name">

							场馆名称：

							<span>{{GYM_SESSIONID.gym_name}}</span>

						</div>

					</div>

					<div class="header_right">
						<div class="header_number">

							预约总数：

							<span>{{join[0]}}</span>

						</div>

						<div class="header_number">

							成交总数：

							<span>{{join[2]}}</span>

						</div>

						<div class="header_number">

							收益总额：

							<span>{{'￥'+join[1]}}</span>

						</div>

						<div class="header_ipt">

							<span class="el-icon-search"></span>

							<input type="text" v-model="owner_name" placeholder="输入馆主姓名或手机号">

							<button @click.stop="model" style="outline: none;">查询</button>

						</div>

					</div>

				</div>

			</div>

			<!-- 头部结束 -->

			<!-- 表格 -->

			<el-table :data="tableData" :row-class-name="tableRowClassName" v-loading="loading">

				<el-table-column type="index" label="序号" width="120" :index="indexMethod"></el-table-column>

				<el-table-column prop="username" label="会员姓名" width="180"></el-table-column>

				<el-table-column prop="valid" label="性别" :formatter="formatRole"></el-table-column>

				<el-table-column prop="phone" label="手机号"></el-table-column>

				<el-table-column prop="create_time" label="注册日期" :formatter="formatDate"></el-table-column>

			</el-table>
			<div style="float: right;margin-right: 19.7%;">
				<el-pagination @current-change='yemian'  :current-page='yeshu' layout="prev, pager, next" :total='join[2]'>
				</el-pagination>
			</div>

		</div>

	</div>
</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}
	
	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
<script>
	export default {

		data() {

			return {

				tableData: [],
				owner_name: '',
				options: [{

						value: "选项1",

						label: "VIP月卡"

					},

					{

						value: "选项2",

						label: "VIP年卡"

					}

				],

				value: "",
				input: "",
				value1: "",
				GYM_SESSIONID: '',
				join: '',
				loading: false,
				yeshu: 1,
				zs: ''
			};

		},
		created() {

			let GYM_SESSIONID = JSON.parse(

				window.localStorage.getItem("gym_sessionid")
			);
			this.GYM_SESSIONID = GYM_SESSIONID
			let _this = this;
			let qs = require("qs");
			let obj = {

			}
			_this.$axios.post("/yujiaextend/gymadmin/findAllYogaGymSuccessPeopleByAdmin", qs.stringify(obj), {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded"
					}
				})
				.then((response) => {
					_this.join = response.data.data
					console.log(response.data.data)
					_this.tableData = response.data.data[3]
					_this.zs = _this.tableData.length
					if(_this.tableData == '') {
						_this.$message({
							message: '暂无数据',
							type: 'warning'
						});
					}

					_this.loading = false
				})
				.catch((error) => {
					console.log(error);
				});

		},

		methods: {
			// 判断性别
			formatRole(row) {
				return row.valid == '0' ? "女" : row.valid == '1' ? "男" : "保密";

			},
			// 时间格式化
			formatDate(row, column) {    
				var  date  =  row[column.property];            
				if (date  ==  undefined)  {               
					return  "";            
				}  
				// HH:mm:ss
				          
				return  moment(date).format("YYYY-MM-DD");

			},
			indexMethod(index) {

				return index * 1+1;

			},
			tableRowClassName({

				row,
				rowIndex

			}) {

				if(rowIndex === 1) {

					return "warning-row";

				} else if(rowIndex === 3) {

					return "success-row";

				}
				return "";

			},
			//   查询馆
			model() {
				let _this = this;
				let qs = require("qs");
				let obj = {
					name: _this.owner_name
				}
				_this.$axios.post("/yujiaextend/gymadmin/findAllYogaGymSuccessPeopleByAdmin", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {
						_this.join = response.data.data
						_this.tableData = response.data.data[3]
						_this.zs = _this.tableData.length
						if(_this.tableData == '') {
							_this.$message({
								message: '暂无该馆',
								type: 'warning'
							});
						}

						_this.loading = false
					})
					.catch(function(error) {
						console.log(error);
					});

			},

			//    分页

			yemian(yeshu) {

				console.log(yeshu)
				let obj = {
					page: yeshu
				}
				let _this = this;
				let qs = require("qs");
				this.$axios.post("/yujiaextend/gymadmin/findAllYogaGymSuccessPeopleByAdmin", qs.stringify(obj), {
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then((response) => {
						_this.join = response.data.data
						_this.tableData = response.data.data[3]
						_this.zs = _this.tableData.length
						if(_this.tableData == '') {
							_this.$message({
								message: '暂无该馆',
								type: 'warning'
							});
						}
						_this.loading = false
					})
					.catch((error) => {
						console.log(error);
					});
			},

		}

	};
</script>
<style scoped>
	.member {
		width: 100%;
		height: 100%;
		background: #f2f2f2;
		position: absolute;
		left: 250px;
		top: 0;
		z-index: 2;
	}
	/* 版心 */
	
	.Library_wrap {
		width: 100%;
		height: 100%;
		margin-left: 3%;
	}
	
	.Library_wrap .header {
		width: 100%;
		margin-top: 35px;
	}
	
	.el-button {
		color: #fff;
	}
	
	.Library_wrap .header .header_bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30px;
		padding-bottom: 20px;
		border-bottom: 1px solid #cdcdcd;
	}
	
	.Library_wrap .header .header_bottom .header_left {
		font-size: 16px;
		color: #000000;
		display: flex;
		align-items: center;
	}
	
	.el-date-editor {
		width: 100%;
	}
	
	.el-date-editor {
		line-height: 35px;
	}
	
	.el-select {
		width: 100%;
	}
	
	.Library_wrap .header .header_bottom .header_name {
		font-size: 15px;
		color: #000000;
	}
	
	.Library_wrap .header .header_bottom .header_name span {
		color: #286fe6;
	}
	
	.Library_wrap .header .header_bottom .header_number {
		font-size: 15px;
		color: #000000;
		margin-left: 26px;
	}
	
	.Library_wrap .header .header_bottom .header_number span {
		color: #286fe6;
	}
	
	.Library_wrap .header .header_bottom .header_right {
		display: flex;
		align-items: center;
		padding-right: 20%;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_ipt {
		height: 30px;
		background: #dfdfdf;
		border-radius: 15px;
		display: flex;
		align-items: center;
		margin-left: 27px !important;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_ipt span {
		display: inline-block;
		color: #b9b9b9;
		margin-left: 10px;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_ipt input {
		border: none;
		height: 30px;
		outline: none;
		background: #dfdfdf;
		margin-left: 5px;
	}
	
	.Library_wrap .header .header_bottom .header_right .header_ipt button {
		width: 55px;
		height: 26px;
		line-height: 26px;
		padding: 0 10px;
		border: none;
		border-radius: 15px;
		background: #2e7bfb;
		font-size: 14px;
		color: #ffffff;
	}
	/* 版心结束 */
	/* 表格 */
	
	.el-table {
		width: 80%;
		margin-top: 20px;
	}
	
	.el-table tr th {
		text-align: center !important;
	}
	/* 表格结束 */
	/* 添加馆主*/
	
	.newBuilt {
		width: 100%;
		height: 100%;
		position: absolute;
		left: -250px;
		top: 0;
		z-index: 5;
		background: rgba(0, 0, 0, 0.4);
	}
	
	.newBuilt .add_owner {
		width: 560px;
		background: #fff;
		margin: 146px auto;
		border-radius: 6px;
		box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);
		padding: 0 40px;
		padding-bottom: 40px;
	}
	
	.newBuilt .add_owner .add_top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 40px;
	}
	
	.newBuilt .add_owner .add_top p {
		font-size: 20px;
		padding-bottom: 5px;
		border-bottom: 3px solid #286fe6;
		color: #000;
		font-weight: bold;
	}
	
	.newBuilt .add_owner .add_top span {
		font-size: 18px;
		display: inline-block;
	}
	
	.newBuilt .add_owner .add_bottom {
		width: 100%;
	}
	
	.newBuilt .add_owner .add_bottom ul {
		width: 100%;
	}
	
	.newBuilt .add_owner .add_bottom ul li {
		width: 94%;
		display: flex;
		align-items: center;
		margin-top: 35px;
	}
	
	.newBuilt .add_owner .add_bottom ul li span {
		display: inline-block;
		width: 25%;
		font-size: 16px;
		color: #000000;
	}
	
	.newBuilt .add_owner .add_submit {
		width: 52%;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		text-align: center;
		background: #2f7dfe;
		border-radius: 4px;
		margin-top: 80px;
		font-size: 16px;
		color: #fff;
	}
	/* 添加馆主结束 */
</style>